<template>
  <div class="root">
    <div class="text">
      <div class="one">都是关于货物交易的</div>
      <div class="two">江益佳找到了理想的进货渠道。</div>
    </div>
    <div class="card-one">
      <div class="message">
        “真的很方便，很容易-在购买后第二天货就到了，赚了一大笔!”
      </div>
      <div class="author">江益佳<br />人工智能领域卓越贡献者</div>
    </div>
    <div class="card-two"></div>
    <div class="chair"></div>
  </div>
</template>

<style lang="scss" scoped>
$rootHeight: 550px;
$textMarginTop: 2%;

$cardOneWidth: 52%;
$cardOneHeight: 65%;
$cardOneMarginTop: 3%;

$cardTwoWidth: 55%;
$cardTwoHeight: 65%;
$cardTwoLeft: 38%;
$cardTwoTop: 30%;

$messageWidth: 50%;
$messageHeight: 10%;
$messageMarginLeft: 2%;
$messageMarginTop: 5%;

$authorMarginLeft: 2%;
$authorMarginTop: 17%;

$chairWidth : 23%;
$chairHeight : 30%;
$chairLeft : 4%;
$chairTop : 67%;
.root {
  height: $rootHeight;
  //border: 1px solid red;
  position: relative;
  .text {
    margin-top: $textMarginTop;
    .one {
      font-family: 微软雅黑;
      font-size: 34px;
      color: rgb(51, 51, 51);
      background-color: rgba(255, 255, 255, 0);
      font-weight: 700;
      font-style: normal;
      text-decoration: none;
      letter-spacing: 0px;
      line-height: normal;
      text-shadow: none;
      margin-top: $textMarginTop;
    }
    .two {
      font-family: 微软雅黑;
      font-size: 16px;
      color: rgb(51, 51, 51);
      background-color: rgba(255, 255, 255, 0);
      font-weight: 400;
      font-style: normal;
      text-decoration: none;
      letter-spacing: 0px;
      line-height: normal;
      text-shadow: none;
      margin-top: 0.8%;
    }
  }
  .card-one {
    width: $cardOneWidth;
    height: $cardOneHeight;
    margin-top: $cardOneMarginTop;
   // border: 1px solid green;
    background-color: rgb(236, 74, 163);
    .message {
      width: $messageWidth;
      height: $messageHeight;
      margin-top: $messageMarginTop;
      margin-left: $messageMarginLeft;
      font-family: 微软雅黑;
      font-size: 26px;
      color: rgb(255, 255, 255);
      background-color: rgba(255, 255, 255, 0);
      font-weight: 700;
      font-style: normal;
      text-decoration: none;
      letter-spacing: 0px;
      line-height: 1.6em;
      text-shadow: none;
    }
    .author {
      margin-top: $authorMarginTop;
      margin-left: $authorMarginLeft;
      font-family: 微软雅黑;
      font-size: 14px;
      color: rgb(255, 255, 255);
      background-color: rgba(255, 255, 255, 0);
      font-weight: 400;
      font-style: normal;
      text-decoration: none;
      letter-spacing: 0px;
      line-height: normal;
      text-shadow: none;
    }
  }
  .card-two {
    position: absolute;
    width: $cardTwoWidth;
    height: $cardTwoHeight;
    border: 1px solid black;
    left: $cardTwoLeft;
    top: $cardTwoTop;
    background-image: url("/images/1197394732069003544.jpg");
    background-size: 100% 100%;
  }
  .chair {
      position: absolute;
      width: $chairWidth;
      height: $chairHeight;
      left: $chairLeft;
      top: $chairTop;
      background-image: url("/images/1197394731863482648.png");
      background-size: 100% 100%;
    //  border: 1px solid red;
  }
}
</style>